<template>
	<view class="min-app">
		<scroll-view class="nav" scroll-y>
			<view v-for="(item,index) in Navigation" :key="index" :class="item.cat_id == currentid?'current':''"
				@click="navSwitch(item.cat_id)">
				{{ item.cat_name }}
			</view>
		</scroll-view>
		<!-- 左侧内容 -->
		<scroll-view class="nav1" scroll-y>
			<view class="dve">
				<block v-for="(item,index) in lsit1" :key="index">
					<view class="dev-list" >
						<text class="cat_name">{{item.cat_name}}</text>
						<Divider style = "margin: 30rpx 0rpx;"></Divider>
						<block v-for="item1 in item.children" :key="index" >
							<view class="list-content" @click="goGoodsDetail(item1)">
								<view class="box">
									<img class="box-img" :src="item1.cat_icon">
									<view class="goods-name">
										{{item1.cat_name}}
									</view>
									<!-- <text>{{item1.cat_name}}</text> -->
								</view>
							</view>
						</block>
					</view>
				</block>
			</view>
		</scroll-view>
		<!-- <image v-for = "item in lsit" :key = "item":src = "item" v-if = "lsit"></image> -->
	</view>
</template>


<script>
	import Divider from '@/components/common/Divider.vue'
	export default {
		data() {
			return {
				//初始数据
				list:[],
				// 子分类
				lsit1: [],
				// 父分类
				lsit: [],
				currentid: 1,
				listint: [
					
				],
				Navigation: [
					
				]
			}
		},
		onLoad() {
			this.getlist()
			// this.GetAccidentData()
		},
		
		methods: {
			goGoodsDetail(id) {
				console.log("商品id为：", id)
				
				uni.navigateTo({
					// url: '/api/public/v1/goods/detail?goods_id=' + id
					// url: '/pages/goods-deatil/goods-deatil?id='+id
					url: '/pages/list-deatil/list-deatil?id='+JSON.stringify(id)
			
				})
			},
			// 导航到商品详情页
			async getlist() {
				const res = await this.$myRequest({
					url: '/api/public/v1/categories'
				})
				this.Navigation = res.data.message
				// console.log(221111, this.Navigation)
				this.lsit = this.Navigation[0].children[0].children
				// console.log(888888777777,this.lsit)
				//获取页面初始数据
				let lsit = this.Navigation.filter(i => i.cat_id == 1)
				// console.log(1122225, lsit)
				// this.lsit = lsit1.children
				this.list = lsit
				// console.log(889977, this.lsit)
				this.lsit1 = this.list[0].children
				console.log(667755, this.lsit1)
			},
			navSwitch(id) {
				this.currentid = id;
				// console.log(111333555,this.currentid)
				// let lsit = this.Navigation.filter((e) => e.id == id);
				let lsit = this.Navigation.filter(i => i.cat_id == this.currentid)
				// console.log(111333555, lsit)
				// this.lsit = lsit1.children
				this.lsit = lsit
				// console.log(889977, this.lsit)
				this.lsit1 = this.lsit[0].children
				console.log(667755, this.lsit1)
			}

		},
		components: {
			Divider
		},
	}
</script>

<style>
	page {
		height: 100%;
	}
	.box-img{
		width: 240rpx;
		height: 240rpx;
	}
.dev-list{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	margin: 20rpx 0;
	/* justify-content: space-between; */
}
	.goods-name {
		font-size: 28rpx;
		font-weight: 500;
		color: darkgray;
		display: flex;
		justify-content: center;
	}

	.box {
		width: 100%;
	}

	.list-content {
		display: flex;
		width: 50%;
	}

	.cat_name {
		/* text-align: center; */
		/* display: flex;
		justify-content: center; */
		font-size: 32rpx;
		font-weight: 1000;
		position: absolute;
		left: 0%;
		margin: 10rpx 4rpx;
	}

	.min-app {
		height: 100%;
		display: flex;
	}

	.nav1 {
		height: 100%;
	}

	.min-app .nav {
		width: 200rpx;
		height: 100%;
		border-right: 1px solid #eee;
	}

	.min-app .nav view {
		display: block;
		text-align: center;
		width: 100%;
		height: 60px;
		line-height: 60px;
		color: #333333;
		font-size: 30rpx;
		border-top: 1px solid #eee;
	}

	.min-app .nav .current {
		background-color: #007aff;
		color: #FFFFFF;
	}

	/* 隐藏 scroll-view滚动条*/
	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.dve {
		flex: 1;
		align-items: center;
		display: flex;
		flex-direction: column;
		/* height: 100%; */
	}

	.dve image {
		width: 90%;
		height: 300rpx;
		margin-top: 10px;
	}
</style>
